<template>
  <div class="administer">
    <div class="administerNav">
      <backHeader></backHeader>
    </div>
    <div class="administerCont">
      <div class="role html_pst">
        <div class="roleControl">
          <el-table :data="tableData" border style="width: 100%"  class="uytv" :max-height="tableHeight">
            <el-table-column type="index" label="序号" width="90"></el-table-column>
            <el-table-column prop="roleChName" label="机构Logo" >
                <template slot-scope="scope">
                    <img v-show="scope.row.logo != null && scope.row.logo != ''" :src="ImgPath + scope.row.logo" width="100"  />
                </template>
            </el-table-column>
            <el-table-column prop="orgName" label="机构名称"></el-table-column>
            <el-table-column prop="supplierEnName" label="英文名称"></el-table-column>
            <el-table-column prop="firstLinkman" label="联系人"></el-table-column>
            <el-table-column prop="linkmanPhone" label="联系电话"></el-table-column>
            <el-table-column prop="compEmail" label="电子邮箱"></el-table-column>
            <el-table-column prop="website" label="网址"></el-table-column>
            <el-table-column prop="compAddress" label="地址"></el-table-column>
            <el-table-column prop="orgDesc" label="公司简介"></el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <div class="managementProductList_btn">
                  <el-button @click="showEditView(scope.row)" type="text" size="small">修改</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      :title="addFormModelTitle"
      :visible.sync="isShowAddForm"
      
      custom-class="addRole pop-up jigou"
       v-dialogDrag
    >
      <el-form ref="form" label-width="80px">
        <div class="cont">
          <div class="lt">
            <el-form-item label="机构名称" :rules="[{ required: true, trigger: 'blur' }]">
          <el-input v-model="form.orgName"></el-input>
        </el-form-item>
        <el-form-item label="英文名称">
          <el-input v-model="form.supplierEnName"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.firstLinkman"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.linkmanPhone"></el-input>
        </el-form-item>
        
        <el-form-item label="电子邮箱">
          <el-input v-model="form.compEmail"></el-input>
        </el-form-item>
        <el-form-item label="网站地址">
          <el-input v-model="form.website"></el-input>
        </el-form-item>
        
        
        
          </div>
          <div class="rt">
            <el-form-item label="机构logo">
              <div v-if="form.logo" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.logo" alt="" style="width:178px;height:178px;float:left;margin-bottom:17px">
                                                <span class="el-upload-list__item-actions" style="width:178px;height:178px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandLogoRemove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
              </div>
            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess" 
                                                :before-upload="beforeAvatarUpload">
                                                <img v-if="form.logo" :src="ImgPath + form.logo" class="avatar" >
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="机构简介">
          <el-input v-model="form.orgDesc"  type="textarea" :rows="5"></el-input>
        </el-form-item>
          </div>
        </div>
        
        <el-form-item label="公司地址">
          <el-input v-model="form.compAddress"></el-input>
        </el-form-item>
        <el-form-item class="botm">
          <el-button @click="isShowAddForm=false">取消</el-button>
          <el-button @click="saveEdit()" type="primary">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import backHeader from "@/views/common/backHeader.vue";
export default {
  data() {
    return {
          uploadUrl:'',

          headers: {
                "Authorization": localStorage.getItem('token')
            },
      tableHeight:200,
      isShowAddForm: false,
      addFormModelTitle: "修改机构信息",
      form: {
            orgId:0,
            orgName: "",
            supplierEnName: "",
            firstLinkman: "",
            linkmanPhone: "",
            compEmail:'',
            website:'',
            compAddress:'',
            logo:'',
            orgDesc:''
      },
      tableData: [],
    };
  },
  methods: {
    initData() {
      this.search(1);
    },
    search(page) {
      let self = this;
      this.page = page;
      this.$http.postQuery("/api/organizations/json", {isOrgState:true}, function(res) {
        if (res.success) {
          self.tableData = res.data;
        }
      });
    },
    
      brandLogoRemove() {
          this.form.logo = ''
      },
        handleAvatarSuccess(res, file){
            if(res.success){
                this.form.logo = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
        },
      beforeAvatarUpload(file) {
        var testmsg=/^image\/(jpeg|png|jpg|gif)$/.test(file.type)
	          const isLt4M = file.size / 1024/1024 <=1//图片大小不超过2MB
	          if (!testmsg) {
	            this.$message.error('上传图片格式错误!');
	            return
	          }
	          if(!isLt4M) {
	            this.$message.error('上传图片大小不能超过 1M!');
	            return
              }
	          return testmsg  && isLt4M
      },
    showEditView(row) {
      this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
      this.isShowAddForm = true;
      this.form =  {
            orgId:row.id,
            orgName: row.orgName,
            supplierEnName: row.supplierEnName,
            firstLinkman:row.firstLinkman,
            linkmanPhone:row.linkmanPhone,
            compEmail:row.compEmail,
            website:row.website,
            compAddress:row.compAddress,
            logo:row.logo,
            orgDesc:row.orgDesc
      }
    },
    saveEdit() {
      let self = this;
      if(this.form.orgName == ''){
        this.$message.error('请输入机构名称！');
        return false;
      }

      // if(this.form.linkmanPhone != ''){
      // var phoneReg = /^1[3|4|5|7|8]\d{9}$/; 
      //   if (!phoneReg.test(this.form.linkmanPhone)){
      //     this.$message.error('手机格式错误！');
      //     return false;
      //   }
      // }

      if(this.form.compEmail != null && this.form.compEmail !=  undefined &&  this.form.compEmail != ''){
        var mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (!mailReg.test(this.form.compEmail)){
          this.$message.error('邮箱格式错误！');
          return false;
        }
      }

      this.$http.putObj("/api/organizations", this.form, function(res) {
        if (res.success) {
          self.$message({
            message: "修改成功！",
            type: "success"
          });
          self.search(1);
          self.isShowAddForm = false;
        }else{
              self.$message.error(res.data)
            }
      });
    },
  },
  created() {
    this.initData();
  },
  components: {
    backHeader
  },
  mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 280;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 280
            }
        })
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" >
.uytv{
  max-height: calc(100% - 170px);
  max-height: -webkit-calc(100% - 170px);
}
.uytv tr td:nth-child(3){
  border-right: 2px solid #d3dde2;
}
.searchBoxs{
  .el-form-item{
    margin-bottom: 0px;
  }
}
.el-dialog__wrapper .el-dialog.addRole {
height: auto;
  max-height: 80vh;
  overflow: auto;
}
.role {
  .searchBoxs {
    .el-form-item {
      .el-form-item__content {
        .el-input {
          width: 300px;
        }
      }
      .el-form-item__label {
        font-size: 14px;
        color: #333;
      }
      .el-button--primary {
        background-color: #5b65a1;
        border-radius: 4px;
        border: none;
      }
    }
  }
}
//弹窗样式
.pop-up {
  .el-menu-item,
  .el-submenu__title {
    height: 36px;
    line-height: 36px;
  }
  .el-menu-item-group__title {
    display: none;
  }
  .el-submenu .el-menu-item {
    padding-left: 60px !important;
  }
  .el-menu {
    border: none;
  }
  .el-dialog__header {
    text-align: center;
    .el-dialog__title {
      font-weight: bold;
    }
    .el-dialog__headerbtn {
      width: 22px;
      height: 22px;
      text-align: center;
      line-height: 24px;
      border-radius: 50%;
      background-color: #5962a3;
      i {
        color: #fff;
      }
    }
  }
  .el-dialog__body {
    padding-top: 10px;
    .el-button--primary {
      background-color: #5962a3;
      border-radius: 3px;
      border: none;
    }
  }
  .botm {
    .el-form-item__content {
      margin-left: 0 !important;
    }
    text-align: center;
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-dialog__footer {
    text-align: center;
    .el-button--primary {
      background-color: #5962a3;
      border-radius: 3px;
      border: none;
    }
  }
  .srte {
    width: 100%;
    display: inline-block;
    .lt {
      width: 48%;
      float: left;
      margin-right: 4%;
      .add {
        color: #333;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    .rt {
      width: 48%;
      float: left;
      .remor {
        color: #333;
        font-size: 14px;
        margin-bottom: 10px;
      }
    }
    .title {
      border: 1px solid #ebeef5;
      border-bottom: 0;
      padding: 6px;
    }
    td,
    th {
      text-align: center;
      font-size: 12px;
      padding: 5px 0;
    }
  }
}
.el-checkbox__inner{
  height: 14px;
}
.el-dialog__wrapper .el-dialog.pop-up{
  height: auto;
  max-height: 80vh;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  } 
  .jigou{
    .cont{
      overflow: hidden;
      .lt{
        width: 40%;
        float: left;
      }
      .rt{
        width: 60%;
        float: left;
        padding-left: 4%;
      }
    }
  }
</style>